<template>
  <div class="all">
    <!-- <div class="informa"> -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline=true>
      <div class="informa">
        <div class="tetli">会员详情</div>
        <el-form-item label="昵称：" prop="name">
          <el-input v-model="ruleForm.user.name" :disabled="!disabledStatus" @blur="blurname" maxlength="10" show-word-limit></el-input><span class="setdetail" @click="disabledStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="手机号码：" prop="phone">
          <el-input v-model="ruleForm.user.phone" maxlength="11" type="number" :disabled="!(phoneStatus)" @blur="blurname"></el-input><span class="setdetail" @click="phoneStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="ruleForm.user.email" :disabled="!(emailStatus)" @blur="sendEmail"></el-input><span class="setdetail" @click="emailStatus = true">修改</span>
        </el-form-item>
         <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" :disabled="!(passwoldStatus)" @blur="blurname"></el-input><span class="setdetail"  @click="passwoldStatus = true">修改</span>
        </el-form-item>
        <i class="xuxian"></i>
        <el-form-item label="真实姓名：">
          <el-input maxlength="10" v-model="ruleForm.realName" :disabled="!(nameStatus)" @blur="blurname"></el-input><span class="setdetail" @click="nameStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="ruleForm.user.gender">
            <el-radio label="1"  :disabled="!(radioStatus)" @change="blurname">男</el-radio>
            <el-radio label="0"  :disabled="!(radioStatus)" @change="blurname">女</el-radio>
          </el-radio-group>
          <span class="setdetail"  @click="radioStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="生日：">
           <el-date-picker v-model="ruleForm.user.birthday" :picker-options="expireTimeOption" type="date" :disabled="!(dateStatus)" @change="blurname" value-format="yyyy-MM-dd"></el-date-picker>
           <span class="setdetail"  @click="dateStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="地区：">
            <el-input v-model="ruleForm.place" disabled v-if="!placeStatus"></el-input>
           <el-cascader :options="options" placeholder="请选择地区" :show-all-levels="false" v-model="cascaderplace" ref="myCascader"
                :props="{ value: 'id',label:'name',children:'children' }" v-else  @change="blurplace"  style="width:80%;">
            </el-cascader>
            <span class="setdetail" @click="placeStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="职业：">
          <el-input maxlength="10" type="number" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="ruleForm.vocation" :disabled="!(mchNoStatus)" @change="blurname"></el-input><span class="setdetail" @click="mchNoStatus = true">修改</span>
        </el-form-item>
        <el-form-item label="身高：">
          <el-input maxlength="3" type="number" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="ruleForm.height" :disabled="!(heightStatus)" @change="blurname"><i slot="suffix" style="font-style:normal;margin-right: 10px;">cm</i></el-input><span class="setdetail"  @click="heightStatus = true">修改</span>
        </el-form-item>
         <el-form-item label="注册时间：">
          <el-input  v-model="createTime" disabled></el-input>
        </el-form-item>
        <i class="xuxian"></i>
         <el-form-item>
           <div class="anniu">
               <el-button @click="fanhui">返回</el-button>
           </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { queryDetail,setVipDetail} from '@/api/member'
import {provinceMerchabt} from '@/api/merchants'
import {myMixin} from '@/layout/mixin/ResizeHandler'
export default {
  mixins:[myMixin],
  data() {
    return {
      createTime:'',//注册时间
      cascaderplace:[],
      disabledStatus:false,//禁用状态
      phoneStatus:false,
      emailStatus:false,
      passwoldStatus:false,
      nameStatus:false,
      radioStatus:false,
      dateStatus:false,
      placeStatus:false,
      mchNoStatus:false,
      heightStatus:false,
      pickerStatus:false,
      regEmail:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      value: [],
      options:[],
      detailData:[],
      ruleForm: {
        userId:this.$route.params.val.id,
        creatorId:JSON.parse(this.$store.state.user.userInfo).id,
        id:'',
        cityName:'',//城市名
        provinceName:'',//省名
        districtName:'',//区名
        city:'',//市编码（如果有市名市编码不能为空）
        province:'',//省编码（如果有省名省编码不能为空）
        district:'',//区编码（如果有区名区编码不能为空）
        place:null,//地区
        password:'',//密码
        height:'',//身高cm
        vocation:'',//职业
        user:{
          id:this.$route.params.val.id,
          name:'',//昵称
          phone:'',//手机号
          email:'',//邮箱
          gender: null,//男女 0女1男
          realName:'',//真实姓名
          birthday:'',//生日
          updateTime:null//修改时间
        }
      },
      rules: {
       
      
      },
      expireTimeOption: {
        disabledDate(date) { 
          return date.getTime() > Date.now();
        }
      }
    }
  },
  created(){
    this.vipDetail()
    this.placeShow()
  },
computed:{
    item(){
      return this.$route.params.val
    }
  },
  methods: {
      sendEmail() {
          if (this.ruleForm.email != '' && !this.regEmail.test(this.ruleForm.email)) {
              this.$message({ message: '邮箱格式不正确',type: 'error' })
              this.emailForm.email = ''
          }
          this.blurname()
      },
   async placeShow() {//获取省
       let res = await provinceMerchabt()
       this.options = res.data
   },
   async blurname() {//修改
      if(this.ruleForm.user.phone == this.detailData[0].phone){
          this.ruleForm.user.phone = ''
      }   
      let res = await setVipDetail(this.ruleForm)
      if(res.code == 200) {
          this.disabledStatus = false
          this.phoneStatus = false
          this.emailStatus = false
          this.passwoldStatus = false
          this.nameStatus = false
          this.radioStatus = false
          this.dateStatus = false
          this.placeStatus = false
          this.mchNoStatus = false
          this.heightStatus = false
          this.pickerStatus = false
           this.vipDetail()
      }
   },
   blurplace(val) {//省市区赋值
       this.ruleForm.province = val[0]
       this.ruleForm.city = val[1]
       this.ruleForm.district = val[2]
       this.options.forEach((item,index) => {
           if(item.id == val[0]) {
            this.ruleForm.provinceName = item.name
           }
           item.children.forEach((itemCity,cityIndex) => {
               if(itemCity.id == val[1]) {
                this.ruleForm.cityName = itemCity.name
               }
               itemCity.children.forEach((districtItem,districtIndex) => {
                   if(districtItem.id == val[2]) {
                    this.ruleForm.districtName = districtItem.name
                   }
               })
           })
       })
        this.blurname()
       
   },
  async vipDetail() {//查询
      let res = await queryDetail({id:this.item.id})
      if(res.code == 200){
        this.detailData = res.data
        this.ruleForm.user.name = res.data[0].name
        this.ruleForm.user.phone = res.data[0].phone
        this.ruleForm.user.email = res.data[0].email
        this.ruleForm.password = res.data[0].password
        this.ruleForm.user.realName = res.data[0].realName
        this.ruleForm.user.gender = res.data[0].gender ? res.data[0].gender.toString() : ''
        this.ruleForm.user.birthday = res.data[0].birthday
        this.ruleForm.place = res.data[0].place
        this.ruleForm.vocation = res.data[0].vocation
        this.ruleForm.height = res.data[0].height
        this.createTime = res.data[0].createTime
        this.ruleForm.id = res.data[0].userDetailId
        this.ruleForm.user.updateTime = this.getNowFormatDate()//转换时间格式
       
      }
     
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
         this.confirm()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
		fanhui(view){ //返回按钮
			this.$router.go(-1);
			this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
				this.toLastView(visitedViews, view)
			})
		},
		 toLastView(visitedViews, view) {
			const latestView = visitedViews.slice(-1)[0]
			if (latestView) {
				this.$router.push(latestView.fullPath)
			}
		},
  }
}
</script>

<style scoped lang="scss">
.all {
  box-sizing: border-box;
  padding: 15px;
}
.informa {
  width: 100%;
  height: auto;
  background-color: #fff;
  background-color: #fff;
  margin-top: 25px;
  // border-radius: 6px;
  padding: 15px;
  // -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  // box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
 .phones ::v-deep .el-form-item__content {
   display: inline-flex;
} 
 .informa ::v-deep .el-form-item__label {
   width: 150px !important;
 } 
.el-form-item{
  display: inline;
}
 .el-input{
  width:80% !important;
  float: left;
}
.el-form-item__label{
  padding:0px !important;
}
.tetli{
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  border-bottom: 2px solid #F6F6F6;
  margin-bottom: 30px;
}
.aptitudes{
 .updata{
   display: inline-block;
   width:40%;
 }
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.xuxian{
    width: 100%;
    height: 1px;
    border-bottom: 2px dashed #F3F3F3;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 30px;
}
.anniu{
    margin-left: 350px;
    width: 100%;
}
.setdetail{
    color: #1C89D2;
    float: right!important;;
}
::v-deep .el-form-item--medium .el-form-item__content{
   width: 50%;
}
</style>
